<template>
    <div>
        <el-form :model="form" style="width:600px" label-width="100px"
        ref="form" :rules="rules" @submit.native.prevent>
            <el-form-item label="电影院名称" prop="cinema_name">
                <el-input v-model="form.cinema_name"></el-input>
            </el-form-item>
            <el-form-item label="选择位置" >
                <div id="container" style="width:100%;height:200px;border:1px solid black"></div>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="省份" prop="province">
                <el-input v-model="form.province"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
                <el-input v-model="form.city"></el-input>
            </el-form-item>
            <el-form-item label="地区" prop="district">
                <el-input v-model="form.district"></el-input>
            </el-form-item>
            <el-form-item label="经度" prop="longitude">
                <el-input v-model="form.longitude"></el-input>
            </el-form-item>
             <el-form-item label="纬度" prop="latitude">
                <el-input v-model="form.latitude"></el-input>
            </el-form-item>
            <el-form-item label="标签" prop="tags">
                <el-select v-model="form.tags" multiple placeholder="请选择">
                    <el-option
                    v-for="item in tags"
                    :key="item.id"
                    :label="item.tagname"
                    :value="item.tagname">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">新增</el-button>
                <el-button type="info" >取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    data() {
        return {
            map:null,  //地图对象
            marker:null, // 标记点
            tags:[],
            form:{
                    cinema_name:'',
                    address:'',
                    province:'',
                    city:'',
                    district:'',
                    longitude:'',
                    latitude:'',
                    tags:''
            },
            rules:{
                    cinema_name:[{required:true,trigger:'blur',message:'必填'}],
                    address:[{required:true,trigger:'blur',message:'必填'}],
                    province:[{required:true,trigger:'blur',message:'必填'}],
                    city:[{required:false,trigger:'blur',message:'必填'}],
                    district:[{required:true,trigger:'blur',message:'必填'}],
                    longitude:[{required:true,trigger:'blur',message:'必填'}],
                    latitude:[{required:true,trigger:'blur',message:'必填'}],
                    tags:[{required:true,trigger:'blur',message:'必填'}],
                }
            }
        },
        mounted(){
            // 加载电影院标签
            this.$http.cinemaApi.queryAllTags().then(res=>{
                console.log(res);
                this.tags=res.data.data
            })

            // 加载地图相关
            window._AMapSecurityConfig ={
                securityJsCode:'ac4fda467eda97f40d6276c49642b190'
            }
            AMapLoader.load({
                "key": "bf605d4ab046bff2a20e176225de87cb",             
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ['AMap.Geocoder'],     // 需要使用的的插件列表
            }).then((AMap)=>{
                this.map = new AMap.Map('container');
                this.map.setCenter([116.403016,39.93729])
                this.map.setZoom(13)
                this.map.on('click',(e)=>{
                   let {lng,lat}=e.lnglat;
                   console.log({lng,lat});
                //    添加一个点标记
                if(this.marker){
                    this.marker.setPosition([lng,lat])
                }else{
                    this.marker=new AMap.Marker({
                    position:[lng,lat]  
                   })
                   this.map.add(this.marker)
                }  //拿到地址
                this.getAddress(AMap,[lng,lat])                  
                })
            }).catch(e => {
                console.log(e);
            })
        },
        methods: {
            submit(){
                this.$refs['form'].validate(valid=>{
                    if(valid){
                        this.form.tags=this.form.tags.join(',')
                        console.log('验证通过',this.form);
                        this.$http.cinemaApi.add(this.form).then(res=>{
                            console.log('添加影院信息',res);
                            if(res.data.code==200){
                                this.$message({type:'success',message:'添加成功'})
                                this.$router.push('/home/cinema-list')
                            }
                        })
                    }
                })
                
            },
            getAddress(AMap,position) {
                let geocoder=new AMap.Geocoder()
                geocoder.getAddress(position,(status,result)=>{
                    console.log(status,result);
                    let r=result.regeocode
                    this.form.address=r.formattedAddress
                    this.form.province=r.addressComponent.province
                    this.form.city=r.addressComponent.city
                    this.form.district=r.addressComponent.district
                    this.form.longitude=position[0]
                    this.form.latitude=position[1]
                })
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>